<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>

<body>
	<button>点击</button>
	<script type="text/javascript">
		//防抖：多次执行变为一次执行  延时器
		let btn = document.querySelector('button')
		let time = null
		btn.onclick = function () {
			//每次点击都要把上一次的清除
			clearTimeout(time)
			time = setTimeout(() => {
				//执行代码
				console.log('pajinsen')
			}, 1000)
		}


		//节流：不让事件触发的过于频繁，通过延时器的方式保证一段时间内只执行一次 设置事件间隔
		/*let time2 = null
		document.onmousemove = function() {
			//保证1s里执行这一段
			if(!time2){
				time2 = setTimeout(function() {
				console.log('1111111')
				//执行完清空
				time2 = null
			},1000)
		}
			
		}*/

		// 封装==================
		function fn(delay, action) {
			let time = null
			return function () {
				if (!time) {
					time = setTimeout(function () {
						action()
						//执行完清空
						time = null
					}, delay)
				}
			}

		}
		//执行代码
		function demo() {
			console.log('封装-----')
		}
		let handle = fn(1000, demo)
		document.addEventListener('mousemove', function () {
			handle()	
		})

	</script>
</body>

</html>